<template>
    <div class="admin-login">
        <div class="login-content">
            <h2 style="text-align: center;color: #ccc;">点播系统登陆</h2>
            <br>
            <el-row type="flex" justify="center">
                <el-col :span="6">
                    <el-input v-model="name" class="my-login" placeholder="请输入用户名">
                        <i slot="prefix" class="el-input__icon iconfont icon-user"></i>
                    </el-input>
                </el-col>
            </el-row>
            <br><br>
            <el-row type="flex" justify="center">
                <el-col :span="6">
                    <el-input type="password" class="my-login" v-model="password" placeholder="请输入密码">
                        <i slot="prefix" class="el-input__icon iconfont icon-password"></i>
                    </el-input>
                </el-col>
            </el-row>
            <br><br>
            <el-row type="flex" justify="center" v-if="!register">
                <el-col :span="6">
                    <el-input type="password" class="my-login" v-model="resetPassword" placeholder="确认密码">
                        <i slot="prefix" class="el-input__icon iconfont icon-password"></i>
                    </el-input>
                </el-col>
            </el-row>
            <br v-if="!register"><br v-if="!register">
            <el-row type="flex" justify="center">
                <el-col :span="6">
                    <div @click="register = false;" v-if="register" class="right register-word">无帐号，点击注册</div>
                    <div @click="register = true;" v-if="!register" class="right register-word">有帐号，请登陆</div>
                    <el-button v-if="register" type="primary" class="w100p" @click="login">登 陆</el-button>
                    <el-button v-if="!register" type="primary" class="w100p" @click="registerFun">注 册</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    import api from '@/api'
    import {Loading} from 'element-ui'

    export default {
        data() {
            return {
                name: '', //用户名
                password: '', //密码
                resetPassword: '',//确认密码
                register: true, //是否注册
            }
        },
        methods: {
            /*登录*/
            login() {
                let loading = Loading.service({text: '登陆中'});
                api.login({name: this.name, pwd: this.password}).then(({data: resp}) => {
                    if (resp.code === 200) {
                        this.$message({type: 'success', message: '登录成功'});
                        sessionStorage.role = resp.data.role;
                        sessionStorage.uid = resp.data.uid;
                        this.$router.push('/index');
                        this.$store.dispatch('loadUserInfo');
                        loading.close();
                    } else {
                        this.$message({type: 'warning', message: resp.message});
                        loading.close();
                    }
                }).catch(() => {
                    this.$message({type: 'warning', message: '网络开了个小差，请稍后再试'});
                    this.$nextTick(() => {
                        loading.close();
                    })
                })
            },
            /*注册*/
            registerFun() {
                if (this.password !== this.resetPassword) {
                    this.$message({type: 'warning', message: '前后密码不一致，请重新输入'});
                } else {
                    let loading = Loading.service({text: '注册中'});
                    api.register({name: this.name, pwd: this.password}).then(({data: resp}) => {
                        if (resp.code === 200) {
                            this.$message({type: 'success', message: '注册成功'});
                            this.login();
                            this.$store.dispatch('loadUserInfo');
                            loading.close();
                        } else {
                            this.$message({type: 'warning', message: resp.message});
                            loading.close();
                        }
                    }).catch(() => {
                        this.$nextTick(() => {
                            loading.close();
                        })
                    })
                }
            },
        },
    }
</script>
<style scoped>
    .admin-login {
        position: fixed;
        top: 0;
        buttom: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(45, 58, 73, 1);
        overflow: hidden;
    }

    .login-content {
        position: relative;
        width: 100%;
        height: 100%;
        top: 130px;
    }

    .my-login {
        color: #fff;
    }

    .iconfont {
        font-size: 22px;
    }

    .register-word {
        color: white;
        cursor: pointer;
    }
</style>